<template>
  <div style="height: 100%">
    <van-nav-bar
      class="header"
      title="商品"
      right-text="注册"
      @click-right="toProductRegister">
    </van-nav-bar>
    <div class="main">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="productGetData">
        <van-cell
          v-for="(product, index) in productList" :key="index"
          :title="product.fname" :value="product.fisstatename" is-link
          @click="toProductDetail(product)">
        </van-cell>
      </van-list>
    </div>
    <footer-btn></footer-btn>
  </div>
</template>

<script>
import Cookies from 'js-cookie'
import { 
  NavBar,
  Cell,
  CellGroup,
  List,
  Toast,
} from 'vant';
import footerBtn from '@/components/footerBtn'
import { limscustomerproduct_searchforwx } from '@/api/product'
export default {
  name: 'productList',
  components: {
    footerBtn,
    [NavBar.name]:NavBar,
    [Cell.name]:Cell,
    [CellGroup.name]:CellGroup,
    [List.name]:List,
  },
  created() {
    this.form.userid = 'bb5a8fe0-e03e-42ba-a1ed-279bba27b3a3'
    // this.productGetData()
  },
  data() {
    return {
      loading: false,
      finished: false,
      productList: [],
      total: 0,
      form: {
        userid: Cookies.get('fusreid'),
        pagesize: 20,
        pagenum: 0
      }
    }
  },
  methods: {
    productGetData() {
      this.form.pagenum += 1
      limscustomerproduct_searchforwx(this.form).then(res => {
        this.productList = this.productList.concat(res.rows)
        this.loading = false
        if (this.productList.length >= res.total) {
          this.finished = true
        }
        console.log(this.productList)
      })
    },
    toProductDetail(product) {
      this.$router.push({
        path: '/productEdit',
        query: {
          fid: product.fid
        }
      })
    },
    toProductRegister() {
      this.$router.push({ path: '/productEdit' })
    }
  }
}
</script>

<style scoped>
</style>